<template>
  <div class="ai-assistant-page">
    <div class="page-header">
      <h2 class="title">AI学习助手</h2>
      <div class="description">
        <p>使用AI助手提升学习效率，解答问题，分析资料，获取个性化学习建议</p>
      </div>
    </div>
    
    <div class="assistant-container">
      <AiAssistant />
    </div>
    
    <div class="features-section">
      <h3>AI助手功能</h3>
      <div class="features-grid">
        <div class="feature-card">
          <div class="icon">
            <i class="el-icon-question"></i>
          </div>
          <h4>学习问答</h4>
          <p>针对各学科问题提供专业解答，帮助理解难点</p>
        </div>
        
        <div class="feature-card">
          <div class="icon">
            <i class="el-icon-document"></i>
          </div>
          <h4>资料分析</h4>
          <p>上传学习资料，AI助手可以分析内容并提供摘要</p>
        </div>
        
        <div class="feature-card">
          <div class="icon">
            <i class="el-icon-data-line"></i>
          </div>
          <h4>学习规划</h4>
          <p>根据学习目标和进度，制定个性化学习计划</p>
        </div>
        
        <div class="feature-card">
          <div class="icon">
            <i class="el-icon-reading"></i>
          </div>
          <h4>考试准备</h4>
          <p>提供考试复习策略和重点知识点分析</p>
        </div>
      </div>
    </div>
    
    <div class="tips-section">
      <h3>使用技巧</h3>
      <el-collapse>
        <el-collapse-item title="如何提出更好的问题？" name="1">
          <div class="tip-content">
            <p>提问时尽量具体明确，包含关键信息：</p>
            <ul>
              <li>明确学科和知识点</li>
              <li>描述你的理解程度</li>
              <li>说明你想要的帮助类型（解释概念、解答问题、分析案例等）</li>
            </ul>
            <p>例如："请解释牛顿第二定律，并举例说明它在日常生活中的应用"</p>
          </div>
        </el-collapse-item>
        
        <el-collapse-item title="如何选择合适的AI模型？" name="2">
          <div class="tip-content">
            <p>不同AI模型有不同的专长：</p>
            <ul>
              <li><strong>DeepSeek</strong>：适合深度学术问题和复杂概念解析</li>
              <li><strong>PPT Editor</strong>：适合处理演示文稿和视觉化内容</li>
              <li><strong>Kimi</strong>：适合日常学习辅导和简单问答</li>
              <li><strong>通义万象</strong>：适合多模态内容理解和知识图谱构建</li>
            </ul>
          </div>
        </el-collapse-item>
        
        <el-collapse-item title="如何使用文件分析功能？" name="3">
          <div class="tip-content">
            <p>上传文件时注意：</p>
            <ul>
              <li>支持PDF、Word、TXT和PPT格式</li>
              <li>文件大小不超过10MB</li>
              <li>上传后可以提问与文件内容相关的问题</li>
              <li>可以请求AI总结文件要点或解释特定概念</li>
            </ul>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import AiAssistant from '@/components/AiAssistant'

export default {
  name: 'AIAssistantPage',
  components: {
    AiAssistant
  }
}
</script>

<style lang="scss" scoped>
.ai-assistant-page {
  padding: 20px;
  
  .page-header {
    margin-bottom: 30px;
    
    .title {
      font-size: 24px;
      color: #303133;
      margin: 0 0 10px;
    }
    
    .description {
      color: #606266;
      font-size: 14px;
      max-width: 800px;
    }
  }
  
  .assistant-container {
    margin-bottom: 40px;
    height: 600px;
  }
  
  .features-section {
    margin-bottom: 30px;
    
    h3 {
      font-size: 18px;
      color: #303133;
      margin: 0 0 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
    }
    
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      
      .feature-card {
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
        }
        
        .icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #ecf5ff;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 15px;
          
          i {
            font-size: 24px;
            color: #409EFF;
          }
        }
        
        h4 {
          font-size: 16px;
          color: #303133;
          margin: 0 0 10px;
        }
        
        p {
          font-size: 14px;
          color: #606266;
          margin: 0;
          line-height: 1.6;
        }
      }
    }
  }
  
  .tips-section {
    h3 {
      font-size: 18px;
      color: #303133;
      margin: 0 0 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
    }
    
    .tip-content {
      color: #606266;
      font-size: 14px;
      line-height: 1.6;
      
      ul {
        padding-left: 20px;
        margin: 10px 0;
      }
    }
  }
}
</style> 